<template>
    <div class="cart">
        <div class="show-button" @click="showList = !showList">
            <img src="@/assets/cart/up.png" v-show="!showList">
            <img src="@/assets/cart/down.png" v-show="showList">
        </div>
        <div class="commodity-list" v-show="showList">
            <div class="commodity-item" v-for="item in commodityList" :key="item.id">
                <div class="commodity-img">
                    <img :src="item.img" alt="">
                </div>

                <div class="commodity-name">
                    {{ item.name }}
                </div>

                <div class="commodity-price">
                    {{ item.price }}￥
                </div>
                <div class="commodity-number">
                    <van-stepper v-model="item.number" theme="round" button-size="22" min="0" @change="changeNumber(item)"
                        disable-input />

                </div>
            </div>
        </div>
        <div class="info-box">

            <div class="total-price">
                总价格：{{ getTotalPrice }}￥
            </div>

            <van-button round @click="addOrder">选好咯</van-button>
        </div>
    </div>
</template>

<script>
export default {
    props: ['commodityList', 'storeId'],
    data() {
        return {
            totalPrice: 0,
            showList: false,
        }
    },
    computed: {
        getTotalPrice() {
            this.totalPrice = 0
            for (let i = 0; i < this.commodityList.length; i++) {
                let commodity = this.commodityList[i]

                this.totalPrice += commodity.price * commodity.number
            }

            return this.totalPrice;
        }
    },
    methods: {
        changeNumber(data) {

            if (data.number == 0) {
                this.$emit('removeCartCommodityList', data)

            }
        },
        addOrder(){
            
            let orderCommodityListVO = {
                id: null,
                userId: null,
                addressId: null,
                status: null,
                orderCommodityList: [],
            }

            if(this.commodityList.length <= 0){
                this.$toast("请添加商品")
                return
            }


            for(let i = 0; i < this.commodityList.length; i++){

                let commodity = {
                    id: null,
                    orderId: null,
                    commodityId: this.commodityList[i].id,
                    commodityNumber: this.commodityList[i].number,
                    price: this.commodityList[i].price,
                    amount: this.commodityList[i].price * this.commodityList[i].number,
                    img: this.commodityList[i].img,
                    name: this.commodityList[i].name,
                }

                orderCommodityListVO.orderCommodityList.push(commodity)
            }
            
            sessionStorage.setItem("orderCommodityListVO", JSON.stringify(orderCommodityListVO))
            sessionStorage.setItem("storeId", this.storeId)
            this.$router.push({name: 'addOrder'})


        }
    }
}
</script>

<style scoped>
.cart {
    width: 80%;

    background-color: rgb(71, 68, 68);
    color: white;
    margin: auto;
    padding: 10px;

    opacity: 0.98;

    border-radius: 8px;
}

.cart>.show-button {
    width: 20px;
    height: 20px;

    margin: auto;
}

.cart>.show-button img {
    width: 100%;
    height: 100%;

}

.cart>.commodity-list {
    max-height: 250px;
    overflow-y: scroll;
}

.commodity-item {
    display: flex;
    justify-content: space-around;

    margin-top: 10px;
}

.commodity-img {
    width: 50px;
    height: 50px;
}

.commodity-img img {
    height: 100%;
    width: 100%;

    border-radius: 8px;
}

.info-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>

<style>
.cart .van-stepper__input {
    color: white;
}
</style>